<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="朱三元" />
		<meta name="last-edit" content="2021.1.20" />
		<title>丝带效果导航菜单</title>
		<style type="text/css">
      .ribbon{
        height: 80px;
        line-height: 80px;
        background-color: #9e9eff;
        text-align: center;
      }
      .ribbon a{
        color: black;
        background-color: #fff;
      }
      .ribbon a span{
        color: black;
        padding: 8px 15px;
        background-color: #fff;
        text-decoration-line: none;
      }
		</style>
	</head>
  <body>
    <div class="ribbon">
      <a href="#"><span>网站首页</span></a>
      <a href="#"><span>关于我们</span></a>
      <a href="#"><span>产品中心</span></a>
      <a href="#"><span>联系我们</span></a>
    </div>
  </body>
</html>